import React, { useState } from 'react';
import { Image, Flex, Button } from 'antd';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import MaterialPanel from '../../components/MaterialPanel';
import { type Layout } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

import Canvas from '../../components/Canvas';
import Gridarea from '../../components/Gridarea';
import RulerContent from '../../components/RulerContent';
import type { WidgetMaterial, GridWidget } from '../../types/prevViewTypes';

import { useSelector } from 'react-redux';
import type { RootState } from '../../types/theme';
import { themes } from '../../utils/publicCss';

// 定义物料组件列表
const materials: WidgetMaterial[] = [
  {
    id: 1,
    type: 'button',
    name: '按钮',
    img: 'https://vue.mtruning.club/static/png/fullScreen.png',
    initialW: 500,
    initialH: 300,
    pt: { top: 0, left: 0 },
    t: { top: 0, left: 250 },
    r: { top: 150, left: 497 },
    b: { top: 297, left: 250 },
    l: { top: 150, left: 0 },
    lt: { top: 0, left: 0 },
    rt: { top: 0, left: 497 },
    rb: { top: 297, left: 497 },
    lb: { top: 297, left: 0 },
  },
  {
    id: 2,
    type: 'input',
    name: '输入框',
    title: '我是文本',
    img: 'https://vue.mtruning.club/static/png/text_static.png',
    initialW: 500,
    initialH: 300,
    pt: { top: 0, left: 0 },
    t: { top: 0, left: 250 },
    r: { top: 150, left: 497 },
    b: { top: 297, left: 250 },
    l: { top: 150, left: 0 },
    lt: { top: 0, left: 0 },
    rt: { top: 0, left: 497 },
    rb: { top: 297, left: 497 },
    lb: { top: 297, left: 0 },
  },
  {
    id: 3,
    type: 'chart',
    name: '图表',
    img: 'https://vue.mtruning.club/static/png/bar_x.png',
    initialW: 500,
    initialH: 300,
    pt: { top: 0, left: 0 },
    t: { top: 0, left: 250 },
    r: { top: 150, left: 497 },
    b: { top: 297, left: 250 },
    l: { top: 150, left: 0 },
    lt: { top: 0, left: 0 },
    rt: { top: 0, left: 497 },
    rb: { top: 297, left: 497 },
    lb: { top: 297, left: 0 },
  },
  {
    id: 4,
    type: 'table',
    name: '表格',
    img: 'https://vue.mtruning.club/static/png/tables_basic.png',
    initialW: 500,
    initialH: 300,
    pt: { top: 0, left: 0 },
    t: { top: 0, left: 250 },
    r: { top: 150, left: 497 },
    b: { top: 297, left: 250 },
    l: { top: 150, left: 0 },
    lt: { top: 0, left: 0 },
    rt: { top: 0, left: 497 },
    rb: { top: 297, left: 497 },
    lb: { top: 297, left: 0 },
  },
];

const PrevView: React.FC = () => {
  const user = useSelector((state: RootState) => state.user.theme);

  return (
    <Flex style={{ flex: 1, alignSelf: 'stretch' }}>
      <DndProvider backend={HTML5Backend}>
        {/* 物料面板 */}
        <MaterialPanel materials={materials} />

        <Flex style={{ flex: 1, alignSelf: 'stretch', margin: '0px 5px', background: themes[user].background }}>
          {/* 网格区 */}
          <RulerContent>
            <Gridarea />
          </RulerContent>
          {/* 画布区域 */}
          {/* <Canvas layout={layout} widgets={widgets} onLayoutChange={onLayoutChange} onAddWidget={addWidget} /> */}
        </Flex>
      </DndProvider>
    </Flex>
  );
};

export default PrevView;
